<template>
	<view style="width: 100%;height: 100%;">

		<view class="">
			<label>
				<checkbox :checked="active" @click="checkAll" /><text>431</text>
			</label>   
		</view>
		<label class="radio" v-for="(item,index) in arr" :key="index" @click="change(index)">
			<checkbox :checked="item.active" /><text>{{item.num}}</text>
		</label>
		<view class="">
			选中数{{nums}}
			<br>
			总计{{total}}
			<br>
			选中对象{{JSON.stringify(filterArr)}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [{
					active: false,
					num: 10
				}, {
					active: false,
					num: 90
				}, {
					active: false,
					num: 50
				}, {
					active: false,
					num: 10
				}, {
					active: false,
					num: 90
				}, {
					active: false,
					num: 50
				}],
				active: false
			}
		},
		onLoad() {},
		methods: {

			checkAll() {
				this.active = !this.active;
				this.arr.forEach((it, inx) => {
					this.$set(it, 'active', this.active)
				})
				// this.$forceUpdate()
			},
			change(index) {
				//单个改状态
				this.arr[index].active = !this.arr[index].active;
				//只要找到一个单选没选中就为true
				let flag = this.arr.some(it => !it.active);
				//有一个没选中  说明全选应该为false
				this.active = !flag;
			}
		},
		computed: {
			nums() {
				return this.arr.filter(it => it.active).length
			},
			filterArr(){
				return this.arr.filter(it=>it.active)
			},
			total() {
				return this.arr.reduce((pre, cur) => pre + cur.num, 0)
			}
		}
	}
</script>

<style>

</style>
